<template>
    <div class="cont">
        <HpToptitle><p slot="topic">组织</p></HpToptitle>
        <div class="left">
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
        <div class="right">
            <div class="content">
                <div class="title">
                    <p><span style="color: #999999;">组织 > 组织架构 > </span><span>通讯录</span></p>
                </div>
                <div class="neicont">
                    <div class="bluetitle">
                        <div class="blu"></div>
                        <div class="blutxt">通讯录</div>
                    </div>
                    <div class="line">
                        <img src="https://preview.axure6.com/194/images/%E9%80%9A%E8%AE%AF%E5%BD%95/u1139.svg" alt="">
                    </div>
                    <!-- 新增员工 -->
                    <div class="operate">
                        <div class="op-left">
                            <input type="text" id="ipt" placeholder="请输入关键字">
                            <div class="search-pic">
                                <img src="https://preview.axure6.com/194/images/%E9%80%9A%E8%AE%AF%E5%BD%95/u1134.svg" alt="">
                            </div>
                        </div>
                        <div class="op-right">
                            <div class="m1">
                                <div class="m1-1"><img src="https://preview.axure6.com/194/images/%E6%97%A5%E7%A8%8B%E5%BE%85%E5%8A%9E/u967.svg" alt=""></div>
                                <div>新增员工</div>
                            </div>
                            <div class="m2">
                                <div>导入</div>
                            </div>
                            <div class="m2">
                                <div>导出</div>
                            </div>
                        </div>
                    </div>
                    <!-- 组织中员工表格 -->
                    <div class="forms">
                        <div class="form-left">
                            <div class="form-title">
                                <p>组织架构</p>
                                <p><img src="https://preview.axure6.com/194/images/%E9%80%9A%E8%AE%AF%E5%BD%95/u1085.svg" alt=""></p>
                            </div>
                            <div class="title-icon">
                                <p><img src="https://preview.axure6.com/194/images/%E9%80%9A%E8%AE%AF%E5%BD%95/u1090.svg" alt=""></p>
                                <p>匠心进出口贸易公司</p>
                            </div>
                            <div class="item1">
                                <div class="sanjiao"><img src="https://preview.axure6.com/194/images/%E9%80%9A%E8%AE%AF%E5%BD%95/u1102.svg" alt=""></div>
                                <div class="item-icon"><img src="https://preview.axure6.com/194/images/%E9%80%9A%E8%AE%AF%E5%BD%95/u1090.svg" alt=""></div>
                                <div class="txt">杭州分公司</div>
                            </div>
                            <div class="item1">
                                <div class="sanjiao"><img src="https://preview.axure6.com/194/images/%E9%80%9A%E8%AE%AF%E5%BD%95/u1102.svg" alt=""></div>
                                <div class="item-icon"><img src="https://preview.axure6.com/194/images/%E9%80%9A%E8%AE%AF%E5%BD%95/u1090.svg" alt=""></div>
                                <div class="txt">杭州分公司</div>
                            </div>
                            <div class="xian">
                                <img src="https://preview.axure6.com/194/images/%E9%80%9A%E8%AE%AF%E5%BD%95/u1082.svg" alt="">
                            </div>
                        </div>
                        <div class="form-right">
                            <template>
                                <el-table
                                    ref="multipleTable"
                                    :data="tableData" stripe
                                    tooltip-effect="dark"
                                    style="width: 100%"
                                    @selection-change="handleSelectionChange">
                                    <el-table-column
                                    type="selection"
                                    width="55">
                                    </el-table-column>
                                    <el-table-column
                                    label="员工名字"
                                    width="120">
                                    <template slot-scope="scope">{{ scope.row.date }}</template>
                                    </el-table-column>
                                    <el-table-column
                                    prop="name"
                                    label="工号"
                                    width="120">
                                    </el-table-column>
                                    <el-table-column
                                    prop="address"
                                    label="部门" width="142"
                                    show-overflow-tooltip>
                                    </el-table-column>
                                    <el-table-column
                                    prop="name"
                                    label="职位"
                                    width="145">
                                    </el-table-column>
                                    <el-table-column
                                    prop="name"
                                    label="手机号码"
                                    width="119">
                                    </el-table-column>
                                    <el-table-column
                                    prop="name"
                                    label="邮箱"
                                    width="119">
                                    </el-table-column>
                                    <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="170">
                                    <template slot-scope="scope">
                                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                        <el-button type="text" size="small">编辑</el-button>
                                        <el-button
                                        @click.native.prevent="deleteRow(scope.$index, tableData)"
                                        type="text"
                                        size="small">
                                        移除
                                        </el-button>
                                    </template>
                                    </el-table-column>
                                </el-table>
                                
                                <div style="margin-top: 20px">
                                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
                                    <el-button @click="toggleSelection()">取消选择</el-button>
                                </div>
                            </template>
                        </div>
                    </div>
                    <!-- 分页 -->
                    <div class="block">
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400">
                        </el-pagination>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    
</template>

<script>
import HpToptitle from './HpToptitle.vue';

export default {
    components:{
        HpToptitle
    },
    data() {
      return {
        data: [{
          label: '组织架构',
          children: [{
            label: '二级 1-1',
          },{
            label: '二级 1-2',
            
          },{
            label: '二级 1-3',
            
          },{
            label: '二级 1-1',
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
          }, {
            label: '二级 2-2',
            
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            
          }, {
            label: '二级 3-2',
            
          }]
        },
    
        ],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: [],
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleClick(row) {
        console.log(row);
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
    
  
}
</script>

<style lang="scss" scoped>
.cont{
    position: relative;
    display: flex;
    .left{
        padding: 20px 10px 0;
        box-sizing: border-box;
        width: 200px;
        height: 100vh;
        position: fixed;
        left: 0px;
        top: 60px;
        z-index: 2;
        background-color: #fff;
    }
    .right{
        width: 100%;
        position: absolute;
        top: 60px;
        right: 0;
        // width: 1380px;
        height: 100vh;
        background-color: rgba(242, 243, 245, 1);
        
        .content{
            position: absolute;
            width: 1360px;
            height: 750px;
            left: 370px;
            padding-top: 20px;
            .title{
                text-align: left;
                font-size: 13px;
            }
            .neicont{
                margin-top: 15px;
                width: 1360px;
                height: 750px;
                padding: 20px;
                box-sizing: border-box;
                background: inherit;
                background-color: rgba(255, 255, 255, 1);
                border-radius: 8px;
                .bluetitle{
                    display: flex;
                    .blu{
                        width: 6px;
                        height: 20px;
                        background: inherit;
                        background-color: rgba(37, 97, 239, 1);
                        border: none;
                        border-radius: 8px;
                    }
                    .blutxt{
                        height: 24px;
                        line-height: 21px;
                        margin-left: 10px;
                        font-weight: 500;
                        font-style: normal;
                        font-size: 18px;
                        color: rgba(51, 51, 51, 0.898039215686275);
                    }
                }
                .line{
                    margin-top: 10px;
                    margin-bottom: 10px;
                    height: 1px;
                    width: 100%;
                }
                .operate{
                    position: relative;
                    display: flex;
                    justify-content: space-between;
                    height: 35px;
                    margin-top: 30px;
                    .op-left{
                        position: relative;
                        width: 300px;
                        height: 32px;
                        box-sizing: border-box;
                        border-width: 1px;
                        border-style: solid;
                        border-color: rgba(228, 228, 228, 1);
                        border-radius: 4px;
                        #ipt{
                            caret-color: rgb(204, 204, 204);
                            margin-left: -60px;
                            width: 211px;
                            height: 30px;
                            padding: 2px 2px 2px 2px;
                            box-sizing: border-box;
                            font-weight: 400;
                            font-style: normal;
                            font-size: 14px;
                            letter-spacing: normal;
                            background-color: transparent;
                            border-color: transparent;
                            outline: none;
                        }
                        .search-pic{
                          position: absolute;
                          top: 4px;
                          right: 13px;
                        }
                    }
                    .op-right{
                        display: flex;
                        font-size: 14px;
                        .m1{
                            padding: 0px 0px 0px 16px;
                            width: 100px;
                            height: 32px;
                            display: flex;
                            align-items: center;                       
                            background-color: rgba(37, 97, 239, 1);
                            border: none;
                            border-radius: 4px;
                            box-sizing: border-box;
                            font-weight: 400;
                            font-style: normal;
                            color: #FFFFFF;
                            line-height: 20px;
                            
                            .m1-1{
                                margin-top: -1px;
                                margin-right: 5px;
                            }
                        }
                        .m2{
                            margin-left: 7px;
                            width: 56px;
                            height: 32px;
                            background-color: rgba(255, 255, 255, 0.0980392156862745);
                            box-sizing: border-box;
                            border-width: 1px;
                            border-style: solid;
                            border-color: rgba(37, 97, 239, 1);
                            border-radius: 4px;
                            font-weight: 400;
                            font-style: normal;
                            color: #2561EF;
                            line-height: 32px;
                        }
                    }
                }
                .forms{
                    display: flex;
                    font-size: 14px;
                    justify-content: space-between;
                    .form-left{
                        position: relative;
                        width: 225px;
                        .xian{
                            position: absolute;
                            width: 1px;
                            height: 528px;
                            top: 25px;
                            right: -10px;
                        }
                        .form-title{
                            margin-top: 35px;
                            width: 219px;
                            display: flex;
                            justify-content: space-between;
                            
                            color: #333;
                        }
                        .title-icon{
                            display: flex;
                            
                        }
                        .item1{
                            width: 219px;
                            display: flex;
                        }
                    }
                    .form-right{
                        width: 1070px;
                    }
                }
            }
        }
    }
}
::v-deep.left .el-tree-node{
    position: relative;
    width: 190px;
    padding: 5px 0;

    // height: 36px;
}
::v-deep.left .el-tree-node__content :hover{
    background-color: rgba(37, 97, 239, 0.0784313725490196);
}
::v-deep.left .el-tree-node__content{
    padding-left: 0 !important;
    padding: 5px 0;
}
::v-deep.left .el-tree-node__expand-icon{
    position: absolute;
    right: 5px;
}
input::placeholder {
    color: rgb(204, 204, 204); /* 现代浏览器 */
    opacity: 1; /* 确保opacity不是0 */
}
 
input::-webkit-input-placeholder { /* Chrome, Safari, Opera */
    color: rgb(204, 204, 204);
    opacity: 1;
}
 
input::-moz-placeholder { /* Firefox 19+ */
    color: rgb(204, 204, 204);
    opacity: 1;
}
 
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgb(204, 204, 204);
}

</style>